<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <title>简单前端页面</title>
</head>

<body class="bg-gray-100 font-sans">
    <!-- 导航栏 -->
    <nav class="bg-blue-600 p-4">
        <div class="container mx-auto flex justify-between items-center">
            <a href="#" class="text-white text-xl font-bold">我的网站</a>
            <div class="space-x-4">
                <a href="#" class="text-white hover:text-gray-200">主页</a>
                <a href="#" class="text-white hover:text-gray-200">关于</a>
                <a href="#" class="text-white hover:text-gray-200">联系我们</a>
            </div>
        </div>
    </nav>

    <!-- 主内容 -->
    <main class="container mx-auto p-8">
        <section class="bg-white p-8 rounded-lg shadow-md mb-8">
            <h1 class="text-3xl font-bold mb-4">欢迎来到我的网站</h1>
            <p class="text-gray-700 leading-relaxed mb-6">这是一个简单的前端页面示例，展示了如何使用 Tailwind CSS 和 Font Awesome 来创建一个美观且响应式的网站。</p>
            <a href="#" class="bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition-colors">了解更多</a>
        </section>

        <section class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div class="bg-white p-6 rounded-lg shadow-md">
                <i class="fa-solid fa-rocket text-3xl text-blue-600 mb-4"></i>
                <h2 class="text-xl font-bold mb-2">快速</h2>
                <p class="text-gray-700">我们的服务快速高效，确保您能尽快得到所需。</p>
            </div>
            <div class="bg-white p-6 rounded-lg shadow-md">
                <i class="fa-solid fa-shield text-3xl text-blue-600 mb-4"></i>
                <h2 class="text-xl font-bold mb-2">安全</h2>
                <p class="text-gray-700">我们采用先进的安全技术，保障您的数据安全。</p>
            </div>
            <div class="bg-white p-6 rounded-lg shadow-md">
                <i class="fa-solid fa-headset text-3xl text-blue-600 mb-4"></i>
                <h2 class="text-xl font-bold mb-2">支持</h2>
                <p class="text-gray-700">我们的客服团队随时为您提供帮助。</p>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white p-4 text-center">
        <p>&copy; 2025 我的网站。保留所有权利。</p>
    </footer>
</body>

</html>
    